$(document)
		.ready(
				function() {

					// Boolean gerant les changement sur la page, pour quitter
					// sans sauver
					var isChanged = false;

					// gere le changement de valeur du select des périmetres
					$("#selectPerimetre").on("change", function(e) {
						var idPerimetre = $("#selectPerimetre option:selected").val();
						if (idPerimetre == 0) {
							return;
						}

						var data = {
							"idPerimetre" : idPerimetre
						};
						$.getJSON('ajax/ajaxGetListeActiviteByPerimetre.action', data, function(data) {
							remplirSelectActivite(data);
							$("#perimetreChoisi").val(idPerimetre);
						});
					});

					// gere le changement de valeur du select des périmetres
					$("#selectActivite").on("change", function(e) {
						var idActivite = $("#selectActivite option:selected").val();
						if (idActivite == 0) {
							return;
						}
						var data = {
							"idActivite" : idActivite
						};
						$.getJSON('ajax/ajaxGetListeTacheByActivite.action', data, function(data) {
							remplirTableauTache(data);
							$("#activiteChoisi").val(idActivite);
						});
					});

					// Gestion du clic d'annulation des changements
					$("#annulerModifTache").click(function(e) {
						e.preventDefault();
						gererQuitterSansSauver();
					});

					// FONCTIONS

					// rempli le select avec les activités associées au
					// périmetre
					function remplirSelectActivite(data) {
						$("#tabTache tbody tr").remove();
						$("#selectActivite option").remove();
						$("#selectActivite").removeAttr("disabled");
						$("#selectActivite").append(
								$("<option></option>").val("0").html("-- Choisissez une activité --").attr(
										"selected", "selected"));
						$.each(data.listeActivites, function(i, activite) {
							$("#selectActivite").append(
									$("<option></option>").val(activite.id).html(activite.libelle));
						});
					}

					// rempli le tableau des taches
					function remplirTableauTache(data) {

						$("#tabTache tbody tr").remove();

						ligneToAdd = data.listeTaches.length;
						$.each(data.listeTaches, function(i, tache) {
							var ligne = "<tr>";
							ligne = ligne + '<td><input type="hidden" name="idTache" value="' + tache.id + '" /><input class="verifSubmit" maxlength="255" type="text" name="newLibelle" value="'
									+ tache.libelle + '" /><input type="hidden" name="oldLibelle" value="'
									+ tache.libelle + '" /></td>';
							ligne = ligne + '<td><input class="verifSubmit verifNumeric" type="text" name="newChargeInit" value="'
									+ tache.chargeInit
									+ '" /><input type="hidden" name="oldChargeInit" value="'
									+ tache.chargeInit + '" /></td>';
							if (tache.etat.id == 1){
								ligne = ligne + '<td><span class="label ' + tache.etat.libelleCss
								+ ' label-mini">Créée</span></td>';
							}else{
								ligne = ligne + '<td><span class="label ' + tache.etat.libelleCss
								+ ' label-mini">' + tache.etat.libelle + '</span></td>';
							}
							
							ligne = ligne + '<td><textarea maxlength="5000" name="newCommentaire">' + tache.commentaire
									+ '</textarea><input type="hidden" name="oldCommentaire" value="'
									+ tache.commentaire + '" /></td>';

							// Je créer le select prérempli des utilisateurs et
							// gere la
							// préselection
							var selectUsersActifs = $("<select name=\"newAttrUtilisateur\" />");
							var isTacheLiee = false;
							if (tache.utilisateur != null) {
								isTacheLiee = true;
							} else {
								$("<option />", {
									value : 0,
									text : "-- Sélectionnez un utilisateur --"
								}).prop("selected", "selected").appendTo(selectUsersActifs);
							}

							for ( var val in data.listeUtilisateurActifs) {
								// Si cette tache n'est pas liée a un
								// utilisateur

								var option = $("<option />", {
									value : data.listeUtilisateurActifs[val].id,
									text : data.listeUtilisateurActifs[val].prenom + " "
											+ data.listeUtilisateurActifs[val].nom
								});
								if (isTacheLiee) {
									if (data.listeUtilisateurActifs[val].id == tache.utilisateur.id) {
										option.attr("selected", "selected");
									}
								}
								option.appendTo(selectUsersActifs);

							}

							var idOldUser = 0;
							if (tache.utilisateur != null) {
								idOldUser = tache.utilisateur.id;
							}
							ligne = ligne + '<td>' + selectUsersActifs.prop('outerHTML')
									+ '<input type="hidden" name="oldAttrUtilisateur" value="' + idOldUser
									+ '" /></td>';
							ligne = ligne + '<td><input type="checkbox" name="supprTache" value="'
									+ tache.id + '"</td>';
							ligne = ligne + '</tr>';
							$("#tabTache").append(ligne);
						});

						// J'ajoute la dernier ligne d'add
						var lastLine = "<tr>";
						lastLine = lastLine + '<th><input type="text" id="libelleAdd" maxlength="255" placeholder="Max 255 caractères" /></th>';
						lastLine = lastLine + '<th><input type="text" id="chargeInitAdd" /></th>';
						lastLine = lastLine + '<th></th>';
						lastLine = lastLine + '<th><textarea maxlength="5000" id="commentaireAdd"></textarea></th>';

						var selectUsersActifs = $("<select id=\"idUserAdd\" />");
						$("<option />", {
							value : 0,
							text : "-- Sélectionnez un utilisateur --"
						}).prop("selected", "selected").appendTo(selectUsersActifs);

						for ( var val in data.listeUtilisateurActifs) {
							// Si cette tache n'est pas liée a un utilisateur

							var option = $("<option />", {
								value : data.listeUtilisateurActifs[val].id,
								text : data.listeUtilisateurActifs[val].prenom + " "
										+ data.listeUtilisateurActifs[val].nom
							});
							option.appendTo(selectUsersActifs);

						}

						lastLine = lastLine + '<th>' + selectUsersActifs.prop('outerHTML') + '</th>';
						lastLine = lastLine
								+ '<th><img class="asLink" id="addTache" src="/agraf/assets/img/add.png"></th>';
						lastLine = lastLine + '</td>';

						$("#tabTache").append(lastLine);

						// Listeners
						$("#addTache").click(function(e) {
							// Vérification de base
							var libelle = $("#libelleAdd").val();
							var chargeInit = $("#chargeInitAdd").val();
							var commentaire = $("#commentaireAdd").val();
							var idUser = $("#idUserAdd").val();
							genererNouvelleLigne(data, libelle, chargeInit, commentaire, idUser);
						});

						// Et les listeners sur les on change
						$("input[type='text']").on("change", function(e) {
							isChanged = true;
						});
						$("input[type='checkbox']").on("change", function(e) {
							isChanged = true;
						});
						$("textarea[name='text']").on("change", function(e) {
							isChanged = true;
						});

					}

					// Génére une nouvelle ligne correspondant à l'ajout d'une
					// nouvelle tache
					function genererNouvelleLigne(data, libelle, chargeInit, commentaire, idUser) {
						var ligne = "<tr>";
						ligne = ligne + '<td><input class="verifSubmit" type="text" maxlength="255" name="libelleAdded" value="' + libelle
								+ '" /></td>';
						ligne = ligne + '<td><input class="verifSubmit verifNumeric" type="text" name="chargeInitAdded" value="'
								+ chargeInit + '" /></td>';
						ligne = ligne + '<td><span class="label label-info label-mini">Crée</span></td>';
						ligne = ligne + '<td><textarea maxlength="5000" name="commentaireAdded">' + commentaire
								+ '</textarea></td>';

						// Je créer le select prérempli des utilisateurs et gere
						// la
						// préselection
						var selectUsersActifs = $("<select name=\"newAttrUtilisateurAdded\" />");
						
						$("<option />", {
							value : 0,
							text : "-- Sélectionnez un utilisateur --"
						}).prop("selected", "selected").appendTo(selectUsersActifs);
						

						for ( var val in data.listeUtilisateurActifs) {
							// Si cette tache n'est pas liée a un utilisateur

							var option = $("<option />", {
								value : data.listeUtilisateurActifs[val].id,
								text : data.listeUtilisateurActifs[val].prenom + " "
										+ data.listeUtilisateurActifs[val].nom
							});
								if (data.listeUtilisateurActifs[val].id == idUser) {
									option.attr("selected", "selected");
								}
							option.appendTo(selectUsersActifs);

						}

						ligne = ligne + '<td>' + selectUsersActifs.prop('outerHTML')
								+ '</td>';
						ligne = ligne + '<td><img class="asLink removeTacheAdded" src="/agraf/assets/img/erase.png"></td>';
						ligne = ligne + '</tr>';
						
						// Puis j'insere a l'endroit désiré
						$("#tabTache tr:last").before(ligne);
						
						// Je clean les valeurs
						$("#libelleAdd").val("");
						$("#chargeInitAdd").val("");
						$("#commentaireAdd").val("");
						$("#idUserAdd option[value='0']").prop('selected', true);
						
						// J'ajoute les listener de suppression
						$(".removeTacheAdded").on("click", function (e){
							$(this).parent().parent().remove();
						});
						
						// Reinitialise les effet de formulaire
						reinitEffetFormulaire();
					}

					// Methode gérant l'annulation si changement
					function gererQuitterSansSauver() {
						if (isChanged) {
							if (confirm("Des changements n'ont pas été enregistrés, voulez vous vraiment quitter ?")) {
								cleanPage();
								isChanged = false;
							}
						} else {
							cleanPage();
						}
					}

					function cleanPage() {
						// Je vide le tableau
						$("#tabTache tbody tr").remove();

						// Je vide le select des activités
						$("#selectActivite option").remove();
						$("#selectActivite").append(
								$("<option></option>").val("0").html("-- Choisissez une activité --").attr(
										"selected", "selected")).attr("disabled", "disabled");
						$("#selectPerimetre option").removeAttr("selected");
						$("#selectPerimetre option[value=\"0\"]").attr("selected", "selected");
					}

				});